<template>
<div style="padding: 12px">
  <div style="margin-bottom: 20px">
    <template>
      <Input v-model="params.sfzjhm" placeholder="请输入身份证号" style="width: 300px;margin-right: 10px" />
    </template>
    <template>
      <Select v-model="params.num" style="width:300px;margin-right: 10px">
        <Option value="1">1</Option>
        <Option value="2">2</Option>
      </Select>
    </template>
    <Button type="primary" @click="init()">查询</Button>
  </div>
  <template>
    <Table border :columns="columns" :data="data" :loading="loading">
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" size="small" style="margin-right: 5px" @click="findPeopleYmList(row)">详情</Button>
      </template>
    </Table>
  </template>
  <Row type="flex" justify="end" class="page_style">
    <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize"
          show-total @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
  </Row>
  <Modal
      width="900"
      v-model="ymModal"
      title="查询疫苗接种记录">
    <template>
      <Table stripe :columns="peopleYmColumns" :data="peopleYmData"></Table>
    </template>
  </Modal>
</div>
</template>

<script>
import { findShenHePeopleYMList } from '../../../api/eventlist'
import { findPeopleYmList } from '../../../api/z-new-grid'

export default {
  name: 'index',
  data () {
    return {
      columns: [
        {
          title: '姓名',
          key: 'szzxm'
        },
        {
          title: '身份证号',
          key: 'sfzjhm'
        },
        {
          title: '联系方式',
          key: 'dhhm'
        },
        {
          title: '接种地点',
          key: 'jzdw'
        },
        {
          title: '接种针数',
          key: 'num'
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      data: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      loading: false,
      ymModal: false,
      peopleYmColumns: [
        {
          title: '姓名',
          key: 'szzxm'
        },
        {
          title: '身份证号',
          key: 'sfzjhm'
        },
        {
          title: '疫苗生产企业',
          key: 'ymscqy'
        },
        {
          title: '疫苗接种时间',
          key: 'ymjzsj'
        },
        {
          title: '接种单位',
          key: 'jzdw'
        }
      ],
      peopleYmData: []
    }
  },
  methods: {
    init () {
      this.loading = true
      findShenHePeopleYMList(this.params).then(ret => {
        if (ret.data.errcode === 0) {
          this.data = ret.data.data.results
          this.params.totalRecord = ret.data.data.totalRecord
          this.loading = false
        } else {
          this.$Notice.error({ title: '查询失败!', desc: ret.data.errmsg })
        }
      })
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.init()
    },
    findPeopleYmList (e) {
      let data = {
        sfzjhm: e.sfzjhm
      }
      findPeopleYmList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.peopleYmData = ret.data.data
          this.ymModal = true
        } else {
          this.$Notice.error({ title: '获取失败', desc: ret.data.errmsg })
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style scoped>
.page_style{
  margin-top: 20px;
}
</style>
